<template>
	<view class="">
		<view :class="[sosinfo.tabShow?'xxguanbi':'','btns_rb']">
			<!-- <view class="btns_btn" @click="sos">
				<img class="iconfull" src="http://la.tour-ma.com/r/cms/www/m/maps/icon/map_quanyu.png"></img>
			</view> -->
			<view class="btns_btn"  style="margin-top: 15px;" @click="dingwei">
				<img class="iconfull" :src="$getImgs('yc-yuan-dingwei.png')"></img>
			</view>
			<!-- <view class="btns_btn" style="margin-top: 15px;" @click="sos">
				<img class="iconfull" src="http://newmap.tour-ma.com/r/cms/www/newmap/newmap/icon_yxhj.png"></img>
			</view> -->
			
		</view>
		<view v-if="showsos" :class="[sosinfo.tabShow?'xxguanbi':'','btns_sb']">
			<view class="list" v-for="(el,ind) in list">
				<image :src="getImg(el.icon)"></image>
				<view class="list-name">{{el.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["sosinfo"],
		data(){
			return{
				list:[
					{icon:'icon_sos.png',name:'一键呼救'},
					{icon:'',name:'投诉建议'},
					{icon:'',name:'咨询服务'}
				],
				showsos:false
			}
		},
		watch:{
			sosinfo(){}
		},
		mounted() {
			console.log(this.sosinfo)
		},
		methods:{
			sos(){
				this.showsos=!this.showsos
			},
			getImg(url){
				return 'http://newmap.tour-ma.com/r/cms/www/newmap/newmap/'+url;
			},
			dingwei(){
				this.$emit('changesos',{
					type:true
				})
			}
		}
	}
</script>

<style>
	.list-name{
		width: 78px;
		font-size: 13px;
		color: #666666;
	}
	.list{
		display: flex;
		margin-top: 15px;
	}
	.list image{
		width:24px;
		height:21px;
		margin: 0 12px;
	}
	.btns_sb{
		width:110px;
		height:125px;
		background:rgba(255,255,255,1);
		border-radius:7px;
		position: absolute;
		bottom: 70px;
		right: 61px;
	}
	.xxguanbi {
		/* bottom: 295px !important; */
	}
	.btns_rb {
		position: absolute;
		display: flex;
		right: 10px;
		bottom: 94px;
		color: rgba(0, 0, 0, 0.67);
		font-size: 10px;
		text-align: center;
		flex-direction: column;
	}
	.btns_btn {
	    cursor: pointer;
		width: 38px;
		height: 38px;
		background: #FFFFFF;
		border-radius: 50%;
		position: relative;
		padding: 2px 2px;
	}
	.iconfull{
		width: 20px;
		height: 20px;
		margin: 9px 0px 0px 0px;
	}
</style>
